<html>
{#{% load poll_extras %}#}
<head>
</head>
<link rel="stylesheet" href="/static/package/bootstrap-3.3.7-dist/css/bootstrap.min.css"  >
<style>
    .input-group{
        width: 80%
    }
    .input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group{
        margin-left: 50px
    }
    .hr-box {
        position: relative;
        padding-top: 10px;
    }
    .hr-pos {
        position: absolute;
        left: 50%;
        width: 200px;
        height: 20px;
        margin-left: -520px;
        color: #DDDDDD;
    }
    .div-con-span{
        background: #FFFFFF;
        border-style: solid;
        border-collapse:collapse;
        border-color: #00DD77 #DDDDDD #DDDDDD #DDDDDD;
        border-width: 6px 0.5px 0.5px 0.5px;
        margin-top:10px;
    }
    .div-con-span .row div{
       margin: 10px 0;
    }
    .div-con-span .span-label{
        color:#DDDDDD;
    }
    .pagination>li:first-child>a, .pagination>li:first-child>span{
        border-radius: 50%;
    }
    .pagination>li:last-child>a, .pagination>li:last-child>span{
        border-radius: 50%;
    }
    .pagination>li>a, .pagination>li>span{
        border-radius: 50%;
        margin: 5px;
        background-color: #3c3c3c;
        color: #c4e3f3;
    }
</style>
<body>
<div class="hr-box">
    <div class="hr-pos"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>Company Information</div>
    <hr style="filter: alpha(opacity=0,finishopacity=100,style=1)" width="60%" color="#987cb9" size=3>
</div>

<div class="input-group">
    <span class="input-group-addon" id="basic-addon1">start</span>
    <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
    <span class="input-group-addon" id="basic-addon1">end</span>
    <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
    <span class="input-group-btn">
	        <button type="button" class="btn btn-danger  btn-sm input-inline-search">search</button>
		</span>
</div>
<div class="container-fluid div-con-span">
    <div class="row">
        <div class="col-xs-6 col-md-4"><span class="span-label">Name:</span>{{ one.name }}</div>
        <div class="col-xs-6 col-md-4"><span class="span-label">Country:</span>{{ one.no }}</div>
        <div class="col-xs-6 col-md-4"><span class="span-label">Linkedin:</span><u><a>{{ one.photo }}</a></u></div>
    </div>

    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
    <div class="row">
        <div class="col-xs-6 col-md-4"><span class="span-label">Long Name:</span>{{ two.name }}</div>
        <div class="col-xs-6 col-md-4"><span class="span-label">Industry:</span>{{ two.no }}</div>
        <div class="col-xs-6 col-md-4"><span class="span-label">Wikipedia:</span><u><a>{{ two.photo }}</a></u></div>
    </div>

</div>

<div class="hr-box">
    <div class="hr-pos"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>Sentiment Analytics</div>
    <hr style="filter: alpha(opacity=0,finishopacity=100,style=1)" width="60%" color="#987cb9" size=3>
</div>
<div id="main" style="width: 100%;height: 400px;"></div>
<div class="hr-box">
    <div class="hr-pos"><span class="glyphicon  glyphicon-align-left" aria-hidden="true"></span>News lists</div>
    <hr style="filter: alpha(opacity=0,finishopacity=100,style=1)" width="60%" color="#987cb9" size=3>
</div>
<!--分页表单-->
<table class="table">
    <thead>
    <tr>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
    </tr>
    </thead>
    <tbody>
    {% for x in map %}
        <tr>
            <td>{{ x.name }}</td>
            <td>
                <button type="button" class="btn btn-primary  btn-xs" data-toggle="collapse"
                        data-target="#demo-{{ x.no }}">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                </button>
                {{ x.motto }}
                <div id="demo-{{ x.no }}" class="collapse">
                    {{ x.intro }}
                </div>
            </td>
            <td>{{ x.photo }}</td>
        </tr>
    {% endfor %}
    </tbody>
</table>
<nav aria-label="Page navigation" style="float:right ">
    <ul class="pagination">
{% if map.has_previous %}
    <li>
        <a href="?page={{ map.previous_page_number }}" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
        </a>
    </li>
{% endif %}
{% for pg in map.paginator.page_range %}
    {% if  map.number == pg %}
        <li class="active"><a href="?page={{ pg }}">{{ pg }}</a></li>
    {% else %}
        <li ><a href="?page={{ pg }}">{{ pg }}</a></li>
    {% endif %}
{% endfor %}
{% if map.has_next %}
    <li>
        <a href="?page={{ map.next_page_number }}" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
        </a>
    </li>
{% endif %}
    </ul>
</nav>
</body>
<script src="/static/js/echarts.min.js"></script>
<script src="/static/js/jquery-3.4.0.min.js" ></script>
<script src="/static/package/bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script>
<script>
    var myChart = echarts.init(document.getElementById("main"));
    var title = '折柱混合';
    {#var kv = new Array();//声明一个新的字典#}
    {#kv = {{ obj|safe }};//取出后台传递的数据，此处添加safe过滤避免警告#}
    {#console.log(kv);#}
    option = {
        title:{
            text:title
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line',
                lineStyle: {
                    opacity: 0
                }
            },
        },
        toolbox: {
            feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        legend: {
            data:['蒸发量','降水量','平均温度']
        },
        xAxis: [
            {
                type: 'category',
                data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '水量',
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                    formatter: '{value} ml'
                }
            },
            {
                type: 'value',
                name: '温度',
                min: 0,
                max: 25,
                interval: 5,
                axisLabel: {
                    formatter: '{value} °C'
                }
            }
        ],
        series: [
            {
                name:'蒸发量',
                type:'bar',
                data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
            },
            {
                name:'降水量',
                type:'bar',
                data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
            },
            {
                name:'平均温度',
                type:'line',
                yAxisIndex: 1,
                data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            }
        ]
    };
    myChart.setOption(option);
</script>
</html>